import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  // 主路由
  {
    path: '/',
    name: 'Main',
    redirect: '/home',
    component: () => import('../views/Main.vue'),
    children: [
      {
        path: '/pagetable1',
        name: 'pagetable1',
        component: () => import('../views/PageTable1')
      },
      {
        path: '/pagetable1/editLog/:id?',
        name: 'pagetableEditlog',
        component: () => import('../views/PageTable1/editLog')
      },
      {
        path: '/pagetable2',
        name: 'pagetable2',
        component: () => import('../views/PageTable2')
      },
      {
        path: 'home',
        name: 'home',
        component: () => import('../views/Home.vue')
      },
      {
        path: 'user',
        name: 'user',
        component: () => import('../views/User.vue')
      },
      { // 商品管理
        path: 'mall',
        name: 'mall',
        component: () => import('../views/Mall.vue'),
        meta: {
          keepAlive: true // 需要缓存
        }
      },
      {
        path: 'page1',
        name: 'page1',
        component: () => import('../views/PageOne.vue')
      },
      {
        path: 'page2',
        name: 'page2',
        component: () => import('../views/PageTwo.vue')
      },
      {
        path: 'mappage',
        name: 'mappage',
        component: () => import('../views/MapPage/index.vue')
      },
      {
        path: 'flex',
        name: 'flex',
        component: () => import('../views/Flex.vue')
      },
      {
        path: 'areamap',
        name: 'areamap',
        component: () => import('../views/AreaMap')
      },
      {
        path: 'areamapZJ',
        name: 'areamapZJ',
        component: () => import('../views/AreaMapZJ')
      },
      {
        path: 'curd',
        name: 'curd',
        component: () => import('../views/CURD')
      },
      {
        path: 'test',
        name: 'text',
        component: () => import('../views/Test')
      },
      {
        path: '/engine',
        name: 'engine',
        component: () => import('../views/Engine')
      },
      {
        path: '/richtext',
        name: 'richtext',
        component: () => import('../views/RichText')
      },
      {
        path: '/elementui',
        name: 'elementui',
        component: () => import('../views/ElementUI')
      },
      {
        path: '/baidu',
        name: 'baidu',
        component: () => import('../views/Baidu')
      },
      {
        path: '/toexcel',
        name: 'toexcel',
        component: () => import('../views/Toexcel')
      },
      {
        path: '/localstorage',
        name: 'localstorage',
        component: () => import('../views/LocalStorage')
      },
      {
        path: '/frontpage',
        name: 'frontpage',
        component: () => import('../views/FrontPage')
      },
      {
        path: '/easyui',
        name: 'easyui',
        component: () => import('../views/easyUI')
      },
      {
        path: '/treeselect',
        name: 'treeselect',
        component: () => import('../views/TreeSelect')
      },
      {
        path: '/handlerTableAndForm',
        name: 'handlerTableAndForm',
        component: () => import('../views/HandlerTableAndForm')
      },
      {
        path: '/next',
        name: 'next',
        component: () => import('../views/Next')
      },
      {
        path: '/reportpage',
        name: 'reportpage',
        component: () => import('../views/reportPage')
      },
      {
        path: '/CommonComponents',
        name: 'CommonComponents',
        component: () => import('../views/CommonComponents'),
        meta: {
          keepAlive: true // 需要缓存
        }
      },
      {
        path: '/LowCodeForm',
        name: 'LowCodeForm',
        component: () => import('../views/LowCodeForm')
      }, {
        path: '/ngFormCom',
        name: 'ngFormCom',
        component: () => import('../views/LowCodeForm/ngFormCom')
      }, {
        path: '/ngFormBuild',
        name: 'ngFormBuild',
        component: () => import('../views/LowCodeForm/ngFormBuild')
      },
      {
        path: '/lazyTableTree',
        name: 'lazyTableTree',
        component: () => import('../views/lazyTableTree')
      },
      {
        path: '/LazyTree',
        name: 'LazyTree',
        component: () => import('../views/LazyTree')
      }
    ]
  },
  // 登录路由
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login')
  },
  {
    path: '/large_screen',
    name: 'LargeScreen',
    component: () => import('../views/LargeScreen')
  },
  {
    path: '/large_screen2',
    name: 'LargeScreen2',
    component: () => import('../views/LargeScreen2')
  },
  {
    path: '/flowChart',
    name: 'flowChart',
    component: () => import('../views/FlowChart/panel.vue')
  }
]

// #region 修改push方法
// 缓存原型上的push函数
const originPush = VueRouter.prototype.push
const originReplace = VueRouter.prototype.replace
// 给原型对象上的push指定新函数函数
VueRouter.prototype.push = function (location, onComplete, onAbort) {
  // 判断如果没有指定回调函数, 通过call调用源函数并使用catch来处理错误
  if (onComplete === undefined && onAbort === undefined) {
    return originPush.call(this, location, onComplete, onAbort).catch(() => { })
  } else { // 如果有指定任意回调函数, 通过call调用源push函数处理
    originPush.call(this, location, onComplete, onAbort)
  }
}
VueRouter.prototype.replace = function (location, onComplete, onAbort) {
  if (onComplete === undefined && onAbort === undefined) {
    return originReplace.call(this, location, onComplete, onAbort).catch(() => { })
  } else {
    originReplace.call(this, location, onComplete, onAbort)
  }
}
// #endregion

const router = new VueRouter({
  routes: routes,
  mode: 'history'
})

export default router
